<script lang="ts" setup>
import { i18n } from "@/locales";
import type { Payload } from "@ckpack/vue-color";
import { Sketch } from "@ckpack/vue-color";
import { Dropdown as VDropdown } from "floating-vue";
import MdiChevronRight from "~icons/mdi/chevron-right";
import MdiPalette from "~icons/mdi/palette";

interface Color {
  color: string;
  name: string;
}

withDefaults(
  defineProps<{
    modelValue?: string;
  }>(),
  {
    modelValue: undefined,
  }
);

const emit = defineEmits<{
  (emit: "update:modelValue", value?: string): void;
}>();

// 预定义的颜色调色板（来自 Tailwind CSS 颜色）
const colorPalette: { [key: string]: { [key: string]: string } } = {
  gray: {
    "100": "#f3f4f6",
    "200": "#e5e7eb",
    "300": "#d1d5db",
    "400": "#9ca3af",
    "500": "#6b7280",
    "600": "#4b5563",
    "700": "#374151",
    "800": "#1f2937",
    "900": "#111827",
  },
  red: {
    "100": "#fee2e2",
    "200": "#fecaca",
    "300": "#fca5a5",
    "400": "#f87171",
    "500": "#ef4444",
    "600": "#dc2626",
    "700": "#b91c1c",
    "800": "#991b1b",
    "900": "#7f1d1d",
  },
  orange: {
    "100": "#ffedd5",
    "200": "#fed7aa",
    "300": "#fdba74",
    "400": "#fb923c",
    "500": "#f97316",
    "600": "#ea580c",
    "700": "#c2410c",
    "800": "#9a3412",
    "900": "#7c2d12",
  },
  yellow: {
    "100": "#fef3c7",
    "200": "#fde68a",
    "300": "#fcd34d",
    "400": "#fbbf24",
    "500": "#f59e0b",
    "600": "#d97706",
    "700": "#b45309",
    "800": "#92400e",
    "900": "#78350f",
  },
  green: {
    "100": "#d1fae5",
    "200": "#a7f3d0",
    "300": "#6ee7b7",
    "400": "#34d399",
    "500": "#10b981",
    "600": "#059669",
    "700": "#047857",
    "800": "#065f46",
    "900": "#064e3b",
  },
  blue: {
    "100": "#dbeafe",
    "200": "#bfdbfe",
    "300": "#93c5fd",
    "400": "#60a5fa",
    "500": "#3b82f6",
    "600": "#2563eb",
    "700": "#1d4ed8",
    "800": "#1e40af",
    "900": "#1e3a8a",
  },
  purple: {
    "100": "#f3e8ff",
    "200": "#e9d5ff",
    "300": "#d8b4fe",
    "400": "#c084fc",
    "500": "#a855f7",
    "600": "#9333ea",
    "700": "#7e22ce",
    "800": "#6b21a8",
    "900": "#581c87",
  },
  pink: {
    "100": "#fce7f3",
    "200": "#fbcfe8",
    "300": "#f9a8d4",
    "400": "#f472b6",
    "500": "#ec4899",
    "600": "#db2777",
    "700": "#be185d",
    "800": "#9d174d",
    "900": "#831843",
  },
};

function getColors(): Color[] {
  const result: Color[] = [];

  for (const color in colorPalette) {
    const colorShades = colorPalette[color];
    if (!colorShades) continue;

    const colorShadesArr = Object.entries(colorShades);

    const sortedShades = colorShadesArr
      .filter(([shade]) => parseInt(shade) >= 100 && parseInt(shade) <= 900)
      .sort((a, b) => parseInt(b[0]) - parseInt(a[0]));

    const formattedShades = sortedShades.map(([shade, value]) => ({
      color: value,
      name: `${color} ${shade}`,
    }));

    result.push(...formattedShades);
  }

  return result;
}

function handleSetColor(color: string) {
  emit("update:modelValue", color);
}

function onColorChange(color: Payload) {
  handleSetColor(color.hex);
}
</script>

<template>
  <VDropdown class="inline-flex items-center">
    <slot />
    <template #popper>
      <slot name="prefix" />
      <div class="grid grid-cols-9 gap-1.5 p-2 pt-1">
        <div v-for="item in getColors()" :key="item.color" :style="{ backgroundColor: item.color }" :class="[
          'h-5 w-5 cursor-pointer rounded-sm ring-gray-300 ring-offset-1 hover:ring-1',
          { 'ring-2 !ring-gray-900': modelValue === item.color }
        ]" :title="item.name" @click="handleSetColor(item.color)"></div>
      </div>

      <VDropdown placement="right">
        <div class="p-1">
          <div class="flex cursor-pointer items-center justify-between rounded p-1 hover:bg-gray-100">
            <div class="inline-flex items-center gap-2">
              <MdiPalette />
              <span class="text-xs text-gray-600">
                {{ i18n.global.t("editor.components.color_picker.more_color") }}
              </span>
            </div>
            <div>
              <MdiChevronRight />
            </div>
          </div>
        </div>
        <template #popper>
          <Sketch :model-value="modelValue || '#000'" @update:model-value="onColorChange" />
        </template>
      </VDropdown>
    </template>
  </VDropdown>
</template>
